<template>
  <div class="container mt-6"  style="white-space: nowrap; height: 200px;">
    <div class="card mt-4 text-center">
       <div class="card-body  ">
         <div class="row mt-2 mb-0">
            <argon-input v-model="clientId" placeholder="请输入客户端 ID" size="lg" />
         </div>
         <div class="row mt-0 mb-2 me-4">
            <button class="btn bg-primary-heavy text-white "  @click="downloadFile">导出模型文件</button>
         </div>
         <div class="row mt-0 mb-2 me-4">
            <button class="btn bg-primary-heavy text-white "  @click="downloadFile1">下载demo.py和model.pth的使用说明</button>
         </div>
       </div>

    </div>
    <div class=" mt-4 ms-6 ">
      <p>注：导出的模型文件model.pth可以通过相应的模型代码直接加载并使用</p>
      <p>   具体使用方法可以查看model.pth使用说明</p>
<!--      <pre style="font-size: 18px;">例如：model_path = './model.pth'</pre>-->
<!--      <pre style="font-size: 18px;">     if os.path.isfile(model_path):</pre>-->
<!--      <pre style="font-size: 18px;">        model.load_state_dict(torch.load(model_path))</pre>-->
<!--      <pre style="font-size: 18px;">        print("模型加载成功。")</pre>-->

    </div>
  </div>


</template>

<script setup>
import axios from 'axios';
import {ref} from "vue";
import ArgonInput from "@/components/ArgonInput.vue";

//设置axios
const apiBaseUrl = (window.webConfig && window.webConfig.webApiBaseUrl) || process.env.VUE_APP_BACKEND_API;
const apiModel = axios.create({
  baseURL: apiBaseUrl,
  headers: {
    'Content-Type': 'application/json'
  }
});

const clientId = ref('');
// Define the download file function
const downloadFile = async () => {
  try {
    // const response = await axios.get(`${process.env.VUE_APP_BACKEND_API}/Getmodel`, {
      const response = await apiModel.get(`/Getmodel`, {
      responseType: 'blob', // Important to receive the file as a Blob
      params: {
        clientId: clientId.value // Pass client ID as a query parameter
      }
    });

    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'model.pth'); // or any other extension
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } catch (error) {
    console.error('Error downloading file:', error);
  }
};
const downloadFile1 = async () => {
  try {
    // const response1 = await axios.get(`${process.env.VUE_APP_BACKEND_API}/Getfiles`, {
      const response1 = await apiModel.get(`/Getfiles`, {
      responseType: 'blob',
      params: {
        file: "guide"
      }
    });

    const response2 = await apiModel.get(`/Getfiles`, {
      responseType: 'blob',
      params: {
         file: "demo"
      }
    });

    const url1 = window.URL.createObjectURL(new Blob([response1.data]));
    const url2 = window.URL.createObjectURL(new Blob([response2.data]));

    const link1 = document.createElement('a');
    link1.href = url1;
    link1.setAttribute('download', 'model.pth的使用说明.docx'); // 设置第一个文件的下载属性
    document.body.appendChild(link1);
    link1.click();
    document.body.removeChild(link1);

    const link2 = document.createElement('a');
    link2.href = url2;
    link2.setAttribute('download', 'demo.py'); // 设置第二个文件的下载属性
    document.body.appendChild(link2);
    link2.click();
    document.body.removeChild(link2);
  } catch (error) {
    console.error('Error downloading files:', error);
  }
};



</script>

<style scoped>
button {
  padding: 10px 20px;
  margin: 20px;
  font-size: 16px;
}
.bg-primary-heavy {
  background-color: #152ca8 !important; /* 淡蓝色 */
}
</style>
